<template>
  <main-layout>
    <div class="header">
      <span>萌宠视频</span>
    </div>
    <div class="videos-list">
      <!-- 应该是一个for循环得到的列表页面 -->
       <div class="item" v-for ="it in videoList" :key="it.id">
         <div class="bb">
           <video :src="it.src" loop controls></video>
         <div class="comments">
           <i @click="commentEvt('count',it)">{{it.count}}</i>
           <em @click="commentEvt('message')">{{it.message}}</em>
           <span>查看评论</span>
         </div>
         </div>
       </div>
    </div>
  </main-layout>
</template>


<script>
//引用通用方法
import { dateFormat } from '../../components/index'
import { videoListApi,videoCommentApi } from '../../apis/videoApi'
export default {
    // 页面的视频列表接口应该是分页接口 -> page 不固定/ size:4
    //节流 -- 标识: 三个 是否有更多的数据、是否处于加载状态、是否滚动到底部（是滚动时间实时获取的）

    data(){
       return {
         hasMore:true,
         loading:true,
         videoList:[],
         page:1
       }
    },
    
  computed : {
     userInfo() {
       console.log(this.$store.getters);
       return this.$store.getters['common/getUserInfo']
     }      
  },

    //获取数据
    created(){ 
      //调用获取列表数据的通用方法
      this.getList()
    },
    methods:{
      //点赞和评论接口
      async commentEvt(type,row) {
        
          if(type === 'count') {         

         
            //点赞后,请求接口，如果接口成功，直接给这条数据的点赞数量加一就可以
           
            let result = await videoCommentApi({
              //要传编码和之前以及当前的comment对象
              id:row.id,
               comments: [ 
                   ...row.comments,
                 {
                   userId: this.userInfo.id, 
                   userName: this.userInfo.name, 
                   time: dateFormat(new Date(), 
                   'YYY-MM-DD hh:mm:ss')
                     }
                   ]
            })

            if(result.code === 200) {
              console.log(row.id);
                this.videoList = this.videoList.map(it => {
                   if(it.id === row.id) {
                      // 遍历的时候,当前项的ID和点击的行id相等
                          it.count +=1
                   }
                   return it
                })
            }
          } else {

          }
      },
      async getList(){
         //发送数据接口
         let result = await videoListApi({page:this.page, size:4})
         console.log(result);
        //判断是否请求成功
        if(result.code === 200){
          this.videoList = result.data.rows.map(it => {
                 it.src = 'http://www.shuiyue.info:12600' +it.path

                 //处理comments数据，数据有message的是评论没有则是点赞
                 let count = 0,
                 message = 0

                 for(let item of it.comments) {
                     if(!!item.message) {
                         message += 1 
                     } else {
                       count += 1
                     }
                 }
                 it.count = count
                 it.message = message
                 return it
          })
        }
      }
    }
}
</script>


<style lang="less" scoped>
@import '../../style/common.less';
.header {
  height: 60px;
  width: 100%;
  // border: 1px solid #000;
  background-color: white;
  > span {
    display: block;
    margin: 0 auto;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    font-weight: 700;
  }
}
 .videos-list{
    height: calc(100% - 60px);
    overflow-x:hidden;
    display:block;
    padding: 0 12px;
    >.bb{
      float: left;
       width: 50px;
    }

   >.item{
    display: block;
    margin-bottom:12px;
   border-bottom: solid 1px ;
  &:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }

     video{
        display: block;
        width: 100%;
     }
     .comments{
        display:block;
        padding:12px 0;
         i{
           float: right;
                    height: 36px;
                    margin-right: 12px;
                    font-size: .9rem;
                    color: #666;
                    line-height: 36px;
                    font-style: normal;
                    &::before {
                        content: '';
                        float: left;
                        width: 32px;
                        height: 36px;
                        background: url(../../images/cart/likes.png) center center / 20px 20px no-repeat;
                    }
                    &.active::before {
                        background-image: url(../../images/cart/likes-act.png);

                    }
         }
         em{
               float: right;
                    height: 36px;
                    font-size: .8rem;
                    color: #666;
                    line-height: 36px;
                    font-style: normal;
                    &::before {
                        content: '';
                        float: left;
                        width: 32px;
                        height: 36px;
                        background: url(../../images/cart/comment.png) center center / 20px 20px no-repeat;
                    }
         }
     }
   }
 }
</style>